import React, { Component, PropTypes } from 'react';
import './PhaseStepper.css';

// 小番号表示の画像
import iconPhaseStepActive from './images/iconPhaseStepActive.png';
import iconPhaseStepInActive from './images/iconPhaseStepInActive.png';

class PhaseStepper extends Component {
  render() {
    const { stepIndex, stepSize, style } = this.props;
    let steps = [];
    for (let i = 0; i < stepSize; ++i) {
      if (i === stepIndex) {
        steps.push(<img key={i} src={iconPhaseStepActive} className="interval" alt={''} width={10} height={10} />);
      } else {
        steps.push(<img key={i} src={iconPhaseStepInActive} className="interval" alt={''} width={10} height={10} />);
      }
    }
    return (
      <div className="PhaseStepper" style={style}>
        {steps}
      </div>
    );
  }
}

/*PhaseStepper.propTypes = {
  stepIndex: PropTypes.number.isRequired,
  stepSize: PropTypes.number.isRequired,
  style: PropTypes.object,
}*/

PhaseStepper.defaultProps = {
  stepIndex: 0,
  stepSize: 2,
  style: {},
}

export default PhaseStepper
